<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <el-button
          type="primary"
          style="float: right;"
          size="small"
          @click="showtable"
          v-show="false"
        >重点工作数据分析表</el-button>
      </div>
      <el-dialog
        center
        top="20px"
        title="重点工作数据分析表"
        :visible.sync="dialogVisible"
        width="850px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <div style="text-align:center;margin-bottom:30px">
          <el-select
            class="userIntSize"
            v-model="quarter"
            clearable
            placeholder="请选择季度"
            @change="changeSelsct"
          >
            <el-option
              v-for="item in quarterList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div id="YmyChart"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

      <div class="list" id="taskScore">
        <el-scrollbar class="page-component__scroll" style="height:100%">
          <div style="height:700px;">
            <el-table
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="tableData"
              style="width: 100%;margin-bottom: 20px;"
              row-key="id"
              border
              height="680px"
              default-expand-all
              :tree-props="{
                children: 'children',
                hasChildren: 'hasChildren'
              }"
            >
              <el-table-column label="序号" width="100" prop="index" align="center"></el-table-column>
              <el-table-column prop="name" label="重点工作名称"></el-table-column>
              <el-table-column prop="number" label="全年目标任务量" width="120"></el-table-column>
              <!-- <el-table-column prop="departmentName" label="牵头部门">
              </el-table-column>-->
              <el-table-column prop="year" label="年度" width="100"></el-table-column>
              <el-table-column label="操作时间" width="180">
                <template slot-scope="scope">{{ timestampToTimes(scope.row.updateTime) }}</template>
              </el-table-column>
              <el-table-column label="状态" width="200">
                <template slot-scope="scope">{{ dataType(scope.row) }}</template>
              </el-table-column>
              <el-table-column prop label="审核人" width="100"></el-table-column>
              <el-table-column label="操作">
                <template
                  slot-scope="scope"
                  v-if="!scope.row.children || scope.row.children.length == 0"
                >
                  <el-button @click="setCheck(scope.row)" type="text">任务进度查看</el-button>
                  <el-button
                    @click="addPass(scope.row, 1)"
                    type="text"
                    v-if="!scope.row.children || scope.row.children.length == 0"
                  >通过</el-button>
                  <el-button
                    type="text"
                    @click="addPass(scope.row, -1)"
                    style="margin-bottom: 4px;"
                  >驳回</el-button>
                  <el-button
                    type="text"
                    @click="setLightup(scope.row)"
                    style="margin-bottom: 4px;"
                  >预警亮灯设置</el-button>
                  <!-- <el-button
                    type="success"
                    size="small"
                    @click="handFileList(scope.row)"
                    >附件列表</el-button
                  >-->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
      </div>
    </el-card>
    <!-- 弹出框 -->
    <el-dialog title="审核季度" :visible.sync="dialogAudit" width="30%" center>
      <div style="text-align: center;">
        <b>选择季度:</b>
        <el-select class="userIntSize" v-model="allNumber" @change="cehngeQuarter()" clearable>
          <el-option
            v-for="(item, index) in quarterList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <!-- <div class="light" v-if="type == 1 ? true : false">
          <b>是否预警亮灯:</b>
          <span>
            <el-radio v-model="radio1" label="1" border
              >黄灯
              <img src="../../assets/img/yellowLight.png" alt="" />
            </el-radio>
            <el-radio v-model="radio1" label="2" border
              >红灯
              <img src="../../assets/img/redLight.png" alt="" />
            </el-radio>
            <el-radio v-model="radio1" label="0" border>灭灯</el-radio>
          </span>
        </div>-->
        <div v-if="type == 1 ? false : true" style="margin-top:20px">
          <b class="reject">驳回理由:</b>
          <el-input
            type="textarea"
            :rows="2"
            class="userIntSize"
            placeholder="请输入内容"
            v-model="message"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAudit = false">取 消</el-button>
        <el-button type="primary" @click="setMonthly()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // radio1: "0",
      type: "",
      allNumber: "",
      message: "",
      tableData: [],
      tableDataboy: [],
      dialogVisible: false,
      dialogAudit: false,
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "全年" },
      ],
      quarter: "",
      name: [],
      value: [],
      currVal: {},
      quarterState: false,
    };
  },
  mounted() {
    this.getListByPage();
  },
  beforeUpdate() {},
  methods: {
    showDisplay(val) {
      if (val.isDisplay == true) {
        if (!val.children || val.children.length == 0) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    // 状态
    dataType(row) {
      let _text = "";
      console.log(row);
      if (row.oneQuarterDegreeStatus == 1) {
        return (_text = "第一季度待审核");
      } else if (row.twoQuarterDegreeStatus == 1) {
        return (_text = "第二季度待审核");
      } else if (row.threeQuarterDegreeStatus == 1) {
        return (_text = "第三季度待审核");
      } else if (row.allDegreeStatus == 1) {
        return (_text = "第四季度待审核");
      }

      if (row.oneQuarterDegreeStatus == -1) {
        return (_text = "第一季度驳回");
      } else if (row.twoQuarterDegreeStatus == 1) {
        return (_text = "第二季度驳回");
      } else if (row.threeQuarterDegreeStatus == 1) {
        return (_text = "第三季度驳回");
      } else if (row.allDegreeStatus == 1) {
        return (_text = "第四季度驳回");
      }

      if (row.oneQuarterDegreeStatus == 2) {
        return (_text = "第一季度通过");
      } else if (row.twoQuarterDegreeStatus == 1) {
        return (_text = "第二季度通过");
      } else if (row.threeQuarterDegreeStatus == 1) {
        return (_text = "第三季度通过");
      } else if (row.allDegreeStatus == 1) {
        return (_text = "第四季度通过");
      }
    },
    // 时间转换
    timestampToTimes(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear();
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      // return Y + M + D;
      let _time = `${Y}年${M}月${D}日`;
      return _time;
    },
    // 实时观察第几季度
    cehngeQuarter() {
      this.$axios
        .post(`/distribution/getstate`, {
          quarter: this.allNumber,
          id: this.currVal.id,
          taskId: this.currVal.id,
        })
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data[0].state);
            this.quarterState = res.data[0].state;
          } else {
            this.$message.error(`${res.msg}`);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 审核通过或驳回
    addPass(val, text) {
      this.currVal = val;
      this.id = val.id;
      this.type = text;
      this.currVal = val;
      this.dialogAudit = true;
    },
    // 点击确认审核弹窗
    setMonthly() {
      if (this.allNumber == "") {
        this.$message.error("请选择季度");
        return;
      }
      let _obj = {
        quarter: this.allNumber,
      };
      let _isType = false;
      if (this.type == 1) {
        if (this.quarterState == 0 || this.quarterState == 2) {
          this.$message.error("季度处于“未提交”或“通过”，无法提交!");
          return;
        }
        if (_isType) {
          this.$message.error("季度处于“未提交”或“通过”，无法操作!");
          return;
        }
        _obj.status = 2;
        _obj.taskId = this.id;
        this.$axios
          .post(`/distribution/updateAdopt`, _obj)
          .then((res) => {
            if (res.code == 200) {
              console.log(res);
              this.dialogAudit = false;
              this.$message({
                message: "数据更新成功",
                type: "success",
              });
              this.getListByPage();
            } else {
              this.$message.error(`${res.msg}`);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        if (this.quarterState == 0 || this.quarterState == -1) {
          this.$message.error("季度处于“未提交”或“驳回”，无法提交!");
          return;
        }
        if (_isType) {
          this.$message.error("季度处于“未提交”或“通过”，无法操作!");
          return;
        }
        _obj.status = -1;
        _obj.taskId = this.id;
        _obj.message = this.message;
        this.$axios
          .post(`/distribution/updateAdopt`, _obj)
          .then((res) => {
            if (res.code == 200) {
              console.log(res);
              this.dialogAudit = false;
              this.$message({
                message: "数据更新成功",
                type: "success",
              });
              this.getListByPage();
              this.message = "";
            } else {
              this.$message.error(`${res.msg}`);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
      // this.radio1 = "0";
    },

    // 跳转页面
    setCheck(val) {
      this.$router.push({
        path: "/targetListAudit_2",
        query: {
          id: val.id,
          departmentName: val.departmentName,
          name: val.name,
        },
      });
    },
    // 跳转页面
    setLightup(val) {
      console.log(val);
      this.$router.push({
        path: "/targetListAudit_4",
        query: { id: val.id, departmentName: val.departmentName },
      });
    },
    // 获取数据列表
    getListByPage() {
      this.$axios
        .post(`/task/getList`)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.data;
            let _taskId = localStorage.getItem("taskId");
            this.tableData.forEach((item, index) => {
              if (_taskId == "null" || _taskId == "undefined") {
                item.isDisplay = true;
                if (item.children || scope.row.children.length != 0) {
                  item.children.forEach((i, index2) => {
                    i.isDisplay = true;
                    i.index = `${index + 1}.${index2 + 1}`;
                  });
                }
                item.index = index + 1;
              } else {
                item.index = index + 1;
                if (item.id == _taskId) {
                  item.isDisplay = true;
                } else {
                  item.isDisplay = false;
                }
              }
            });

            this.tableDataboy = [];
            this.tableDataboy = this.tableData.filter(function (
              element,
              index,
              self
            ) {
              return self.findIndex((el) => el.id == element.id) === index;
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showtable() {
      this.dialogVisible = true;
      this.quarter = 1;
      setTimeout(() => {
        this.getCavar(1);
      }, 1000);
    },
    handleClose(done) {
      done();
    },
    changeSelsct(data) {
      this.quarter = data;
      this.getCavar(data);
    },
    getCavar(data) {
      var YmyChart = this.$echarts.init(document.getElementById("YmyChart"));
      let setdata = this.getforData(this.tableData);
      console.log(setdata);
      let name = [];
      let value = [];
      setdata.forEach((i) => {
        if (i.name != undefined) {
          name.push(i.name);
        } else if (i.value != undefined) {
          value.push(i.value);
        }
      });
      console.log(name);
      console.log(value);
      YmyChart.setOption({
        title: {
          text: `“十项重点工作” ${data == 4 ? "全年" : data + "季度"}工作进度`,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b} : {c}%",
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "10%",
          bottom: "0%",
          containLabel: true,
          // y2:150
        },
        xAxis: {
          type: "category",
          // position:'bottom',
          axisLabel: {
            textStyle: {
              //文字样式
              color: "#8c8c8c",
              fontSize: "13",
            },
            //X轴刻度配置
            interval: 0,
            // formatter: function(value) {
            //   return value.split('').join('\n')
            // },
            rotate: 75,
            // margin:80,
          },
          data: name,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} %",
          },
        },
        series: [
          {
            data: value,
            type: "bar",
          },
        ],
      });
    },
    getforData(data) {
      let name = [];
      data.forEach((i) => {
        name.push({ name: i.name });
        if (i.completionDegrees.length != 0) {
          i.completionDegrees.forEach((item) => {
            if (item.type == 1 && item.time == this.quarter) {
              name.push({ value: item.degree });
            }
          });
        }
        if (i.children && i.children.length != 0) {
          name = name.concat(this.getforData(i.children));
        }
      });
      return name;
      // if(data){
      //   data.forEach(i=>{
      //     if(i.completionDegrees.length != 0){
      //       i.completionDegrees.forEach(item=>{
      //         if(item.type == 1 && item.time == this.quarter){
      //           if(i.children.length == 0){
      //             name.push(i.name)
      //             value.push(item.degree)
      //           }else{
      //             this.getforData(i.children)
      //           }
      //         }
      //       })
      //     }
      //   })
      // }
      // return name,value;
    },
  },
};
</script>
<style scoped>
.userIntSize {
  width: 60% !important;
}
#YmyChart {
  width: 100%;
  height: 580px;
  /* margin:50px 0; */
}
.reject {
  position: relative;
  top: -20px;
}
/* .userIntSize{
  width: 200px;
} */
</style>
<style scoped></style>
